<template>
	<page>
		<view class="container">
			<form @submit="onSubmit" report-submit='true'>
			<view class="setting-box">
				<view class="setting-index-list">
					<view class="setting-index-item">
						<view class="left-part font-16 col-20">
							手机号码
						</view>
						<view class="right-part">

							<view class="font-16"><input placeholder='输入手机号码' name='mobile' :data-key="captcha" :value="mobile" @input='bindInput' data-key="mobile" /></view>

						</view>
					</view>
					<view class="setting-index-item">
						<view class="left-part font-16 col-20">
							验证码
						</view>
						<view class="right-part">

							<view class="font-16"><input placeholder='输入验证码' name='captcha' :data-key="captcha" :value="captcha" @input='bindInput' /></view>
							<view>
								<view class="get-qrcode-btn" v-if="startTime" @tap="getCaptcha">获取</view>
								<view class="get-qrcode-btn" v-else>{{time}}S</view>
							</view>
						</view>
					</view>
				</view>
				<view class="mgt-30">
					<button id='1' class='submit-btn  bg-blue font-18' hover-class formType="submit">注册</button>
				</view>

			</view>
			</form>
		</view>
	</page>
</template>

<script>
	import app from '@/App.vue';
	import {
		GYZJMODEL as gyzjModel
	} from '@/utils/gyzjModel.js';
	export default {
		data() {
			return {
				mobile: "",
				captcha: "",
				time: 60,
				startTime: true,
			}
		},
		
		methods: {
			/*getGlobal全局公共函数*/
			validation(e) {
				console.log('e的开始',e);
				let postData = {
					mobile: e.mobile,
					captcha: e.captcha,
				};
				console.log('验证手机号码',postData.mobile);
				console.log('验证验证码',postData.captcha);
				if (!/^1[3456789][0-9]{9}$/.test(postData.mobile)) {
					return "请输入正确的手机号"
				} else if (postData.captcha == "") {
					return "请输入正确的验证码"	
				}
				return true
			},
			  bindInput(e){
				  console.log('e输入的值',e);
				let key = e.currentTarget.dataset.key;
				console.log('e.key',key);
				console.log('e.值',e.detail.value);
				if(key=='mobile'){
					this.mobile=e.detail.value;
				}else{
					this.captcha=e.detail.value;
				}
			  },
			onSubmit(e) {
				console.log('e的开始提交',e);
				let errorMsg = this.validation(e.detail.value);
				if (errorMsg !== true) {
					uni.showToast({
						title: errorMsg,
						icon: "none",
					})
					return;
				}
				let postData = {
					mobile: this.mobile,
					captcha: this.captcha,
				}
				gyzjModel.prototype.getUserInfoMobile(postData,2).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '登录成功',
						})
						console.log('成功的res的值',res);
						/*登录成功后同时保存用户手机和电话信息*/
						app.globalData.userInfo=res.data.user;
						app.globalData.mobile=res.data.user.mobile;
						uni.setStorageSync('userInfo',app.globalData.userInfo);
						uni.setStorageSync('mobile',app.globalData.mobile);
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/index/index',
							})
						}, 1500)
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				})
			},
			getCaptcha() {
				let postData = {
					mobile: this.mobile,
				}
				gyzjModel.prototype.getCaptcha(postData).then(res => {
					console.log('res的值',res);
					if (res.code == 1) {
						uni.showToast({
							title: '发送成功',
							icon: "none",
						})
						let time = this.time;
						setInterval(() => {
							if (0 < time) {
								this.time = --time;
								this.startTime = false;
							} else {
								this.time = 60;
								this.startTime = true;
							}
						}, 1000)
					}
				})
			},
		}
	}
</script>

<style>
	@import url("../../../static/style/app.css");

	.get-qrcode-btn {
		width: 110rpx;
		line-height: 54rpx;
		text-align: center;
		background: rgba(255, 255, 255, 1);
		border-radius: 8rpx;
		border: 1px solid rgba(33, 144, 255, 1);
		color: rgba(33, 144, 255, 1);
	}

	.submit-btn {
		margin: 0 40rpx;
		color: white;
		line-height: 94rpx;
		text-align: center;
		background: rgba(33, 144, 255, 1);
		border-radius: 16rpx;
		font-size: 32rpx;
		/* border:2px solid rgba(5,5,5,0.08); */
	}
</style>
